<template>
    <div class="common-layout">
        <el-container>
            <el-header style="background-color:cadetblue;height: 120px;">

                <h1 style="padding-left: 60px;padding-top: 20px;color:white;">
                    Hello ! 你好 , Admin</h1>
                <h4 style="padding-top: 20px;padding-left: 100px;;color:white;">欢迎使用网格化治理平台！</h4>
            </el-header>
            <el-main>
                <div style="padding-top: 20px;padding-left: 20px;padding-top: 50px;">
                    首次登录系统 , 请根据引导完成以下操作步骤 ! <span style="color:red;">@</span>
                </div>
                <div style="padding-top: 30px;padding-left: 300px;padding-left: 350px;">
                    <el-steps style="max-width: 600px" :active="active" finish-status="success" @change="Shpw">
                        <el-step title="创建网格层级" />
                        <el-step title="创建网格" />
                        <el-step title="创建网格队伍" />
                        <el-step title="登录系统" />
                    </el-steps>
                </div>
                <div style="padding-left: 350px;padding-top: 30px;">
                    <el-tree style="max-width: 600px" show-checkbox :default-expand-all="true" :data="data"
                        @node-click="handleNodeClick" />
                </div>
                <div style=" padding-top: 80px;padding-left: 800px;">
                    <el-button style="margin-top: 12px" @click="te">上一步</el-button>
                    <el-button style="margin-top: 12px;background-color: aqua;" @click="next">确定</el-button>
                </div>
            </el-main>
        </el-container>
    </div>
</template>
<script setup lang="ts">

import { ref } from 'vue'
import { useRouter } from 'vue-router'

interface Tree {
    label: string
    children?: Tree[]
}

const handleNodeClick = (data: Tree) => {
    console.log(data)
}

const data: Tree[] = [
    {
        label: '呼兰区',
        children: [
            {
                label: '呼兰街道',
                children: [
                    {
                        label: '东风社区',
                    },
                    {
                        label: '文化社区',
                    },
                    {
                        label: '新民社区',
                    },
                ]
            },
            {
                label: '利民街道',

            },
            {
                label: '兰河街道',

            },
        ],
    },
]

const active = ref(1)
const router = useRouter();

const next = () => {
    if (active.value++ > 2) active.value = 0
}
const te = () => {
    router.push('/src/views/GriMent/Create_boot.vue')
}
const Shpw = () => {
    router.push('/src/views/GriMent/Create_team.vue')
}

</script>

<style scoped></style>